import React from 'react';
import ReactDOM from 'react-dom';
//import styles
import { Button,ActionSheet } from 'react-weui/build/packages'
import Back from '@/components/back'

class Weui extends React.Component {
  state = {
    ios_show: false,
    menus:[
      {
        label: 'Option 1',
        onClick: ()=> {
          console.log('111');
          this.setState({
            ios_show:false
          })
        }
      }, {
        label: 'Option 2',
        onClick: ()=> {
          console.log('222');
        }
      }
    ],
    actions: [
      {
        label: 'Cancel',
        onClick: this.hide.bind(this)
      }
    ]
  }
  hide(){
    this.setState({
      auto_show: false,
      ios_show: false,
      android_show: false,
    });
  }

  render() {
    return (
      <div>
        <div className='pages weui'>
           <Back></Back> 
          <h2>Weui</h2>
          <a id="logo" href='https://weui.github.io/react-weui/docs/' target='_blank'>
            <img src="https://avatars3.githubusercontent.com/u/10220215?v=3&s=460" alt="weui-logo"/>
            React-Weui
          </a>
          <div className="component">
            <Button type="default" onClick={e=>this.setState({ios_show: true})}>点击显示ActionSheet</Button>
            <ActionSheet
              menus={this.state.menus}
              actions={this.state.actions}
              show={this.state.ios_show}
              type="ios"
              onRequestClose={e=>this.setState({ios_show: false})}
            />
          </div>
        </div>
      </div>  
    );
  }
}

export default Weui